<template>
	<view  class="flex flex-column " :style="'height:'+screenHigth+'px;'">
		<!-- 头部 -->
		<yHeader :current='6' :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<view class="bg-grey py-4" style="height: 100%;">
			<view class="__inner">
				<view class="flex justify-between" style="flex-wrap: wrap;">
					<view v-for="(item,index) in bankList" :key="index" @click="bankdetails()"
						class="flex flex-column align-center mt-2 bg-white p-2 py-4" style="width: 23%;">
						<!-- 左 -->
						<view class="flex flex-column align-center justify-between">
							<view class="flex justify-center w-100">
								<image class="" :src="item.img" style="height: 200rpx;width: 200rpx;object-fit: cover;">
								</image>
							</view>
							<view class="flex flex-column align-center">
								<!-- <text>{{item.name}}</text> -->
								<view class="flex align-center flex-column mt-2">
									<text class="text-white rounded  px-2 mr-2 " :class="'bg-'+ThemeColors">
										保障银行
									</text>
									<text class="font font-weight-bold my-2">{{item.name}}</text>
								</view>

							</view>
						</view>
						<!-- 右 -->
						<view class="flex flex-column align-center">
							<!-- <view class="flex justify-between">
									<text class="font-md" style="color:#fc7c08; ">{{item.money}}</text>
									<text>{{item.term}}</text>
								</view> -->
								<text class="font-sm ">提供以下服务：</text>
							<text class="font-sm text-light-muted"> {{item.money}}</text>
							<text class="text-light-muted font-sm">{{item.term}}</text>
							<text class="font-sm text-light-muted">{{item.profit}}</text>
							<text class="text-light-muted font-sm">{{item.purchase}}</text>
							<text class="text-light-muted font-sm">{{item.adc}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp()
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				screenHigth: uni.getSystemInfoSync().windowHeight,
				ThemeColors: app.globalData.ThemeColors,
				bankList: [
					{
						img:'/static/icon/China_Constuction_Bank.png',
						name: '建设银行',
						money: '应收账款管理',
						term: '信用风险担保',
						profit: '账款催收',
						purchase: '贸易融资',
						adc:'资信调查与评估'
					},
					{
						img:'/static/icon/China_Merchants_Bank.png',
						name: '招商银行',
						money: '应收账款管理',
						term: '信用风险担保',
						profit: '账款催收',
						purchase: '贸易融资',
						adc:'资信调查与评估'
					},
					{
						img:'/static/icon/PBOC.png',
						name: '人民银行',
						money: '应收账款管理',
						term: '信用风险担保',
						profit: '账款催收',
						purchase: '贸易融资',
						adc:'资信调查与评估'
					},

					{
						img:'/static/icon/ICBC.png',
						name: '工商银行',
						money: '应收账款管理',
						term: '信用风险担保',
						profit: '账款催收',
						purchase: '贸易融资',
						adc:'资信调查与评估'
					}
				]
			}
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url
				})
			},
			bankdetails() {
				uni.navigateTo({
					url: "/pages/finance/factoring/tigong"
				})
			},
		}
	}
</script>

<style>

</style>
